.project-content-item{
    min-height: 100px;
    background: #ffffff;
    margin: 20px 0;
}

.code-icon{
    width: 65px;
    height: 65px;
    padding: 10px;
}
.project-detail{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    height: 340px;
    flex-wrap: wrap;
}
.project-detail>li:first-child{
    padding: 10px;
    flex:0 0 15%;
    height: 200px;
    border-right: 2px solid #f4f1e9;
    justify-items: center;
    text-align: center;
}
.project-detail>li:nth-child(2){
    padding: 15px;
    flex:0 0 40%;
    font-size: 16px;
    height: 150px;
    overflow-x: hidden;
    overflow-y: auto;
}
.project-detail>li:nth-child(3){
    flex:0 0 40%;
    height: 250px;
}
.project-detail>li:nth-child(3) img{
    width: 80%;
    padding: 15px 10%;
    height: 220px;
}

.project-detail>li:nth-child(3)>ul>li{
    display: none;
}
.project-detail>li:nth-child(3)>ul>.active{
    display: block;
}
.project-detail>li:last-child{
    flex:0 0 100%;
    padding: 20px;
}
.project-detail>li:last-child>button{
    margin: 25px;
}
@media screen and (max-width: 768px){
    .project-detail{
        height: 720px;
    }
    .project-detail>li:first-child {
        flex:0 0 80%;
        display: flex;
        flex-direction: row;
        margin: 0 10%;
        height: 100px;
        border: unset;
    }
    .project-detail>li:first-child>div{
        padding: 25px;
    }
    .project-detail>li:nth-child(2){
        flex:0 0 80%;
        margin: 0 10%;
    }
    .project-detail>li:nth-child(3){
        flex:0 0 80%;
        margin:0  10%;
        height: 240px;
    }
    .project-detail>li:last-child{
        flex:0 0 80%;
        margin:0  10%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: space-around;
        justify-content: space-between;
        padding: unset;
    }
    .project-detail>li:last-child>button{
        margin:unset;

    }
    .project-detail>li:nth-child(3) img{
        width: 100%;
        padding: 15px 0;
        height: 200px;
    }
}

/* 小屏幕（平板，大于等于 768px） */
@media screen and (min-width: 768px){
    .project-detail{
        height: 500px;
    }
    .project-detail>li:first-child {
        flex:0 0 30%;
        order: 1;
        height: 250px;
    }
    .project-detail>li:nth-child(2){
        flex:0 0 50%;
        order: 3;
    }
    .project-detail>li:nth-child(3){
        flex:0 0 60%;
        order: 2;
    }
    .project-detail>li:last-child{
        flex:0 0 40%;
        order: 4;
    }
    .project-detail>li:last-child>button{
        margin: 15px;
    }
    .project-detail>li:nth-child(3) img{
        width: 90%;
        padding: 15px 5%;
        height: 220px;
    }
}
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media screen and (min-width: 992px){
    .project-detail{
        height: 480px;
    }
    .project-detail>li:first-child {
        flex:0 0 30%;
        order: 1;
        height: 180px;
    }
    .project-detail>li:nth-child(2){
        flex:0 0 60%;
        order: 2;
    }
    .project-detail>li:nth-child(3){
        flex:0 0 55%;
        order: 3;
    }
    .project-detail>li:last-child{
        flex:0 0 40%;
        order: 4;
    }
    .project-detail>li:last-child>button{
        margin: 20px;
    }
    .project-detail>li:nth-child(3) img{
        width: 84%;
        padding: 15px 7%;
        height: 220px;
    }
}
/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media screen and (min-width: 1200px){
    .project-detail{
        height: 340px;
    }
    .project-detail>li:first-child {
        flex:0 0 15%;
    }
    .project-detail>li:nth-child(2){
        flex:0 0 40%;

    }
    .project-detail>li:nth-child(3){
        flex:0 0 40%;
    }
    .project-detail>li:last-child{
        flex:0 0 100%;
    }
    .project-detail>li:last-child>button{
        margin: 25px;
    }
    .project-detail>li:nth-child(3) img{
        width: 80%;
        padding: 15px 10%;
        height: 220px;
    }
}
